import React, { memo, useState, useCallback } from 'react'
import { Table, } from 'antd';

import { BottomWarpper } from './style'
import { getLabel } from '@/utils'

import CustomContainerHeader from '@/components/custom-container-header'
import CustomModal from '@/components/custom-modal'

import RiskAIcon from '@/assets/img/risk-a-icon.png'
import RiskBIcon from '@/assets/img/risk-b-icon.png'
import RiskCIcon from '@/assets/img/risk-c-icon.png'
import RiskDIcon from '@/assets/img/risk-d-icon.png'


const Bottom = memo(() => {
    const [showState, setShowState] = useState(false)
    const riskLevelOptions = [
        {
            "label": "A",
            "value": 1,
            icon: RiskAIcon
        },
        {
            "label": "B",
            "value": 2,
            icon: RiskBIcon
        },
        {
            "label": "C",
            "value": 3,
            icon: RiskCIcon
        },
        {
            "label": "D",
            "value": 4,
            icon: RiskDIcon
        }
    ]
    const rectifyStateOptions = [{
        label: '待整改',
        value: 1,
        bg: '#FA8C16'
    }, {
        label: '已延期',
        value: 4,
        bg: '#FF4D4F'
    },
    {
        label: '待复核',
        value: 2,
        bg: '#1890FF'
    },
    {
        label: '已完成',
        value: 3,
        bg: '#5AD8A6'
    }
    ]
    const columns = [
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            ellipsis: true,
            bordered: false,
            width: 110,
            render: (_, { time }) => {
                return time ? time : '-'
            },

        },
        {
            title: '项目名称',
            dataIndex: 'project_name',
            key: 'project_name',
            ellipsis: true,
            width: 220,
            render: (_, { project_name }) => {
                return project_name ? project_name : '-'
            }
        },
        {
            title: '隐患信息',
            dataIndex: 'risk_info',
            key: 'risk_info',
            width: 220,
            ellipsis: true,
            render: (_, { risk_info }) => {
                return risk_info ? risk_info : '-'
            }
        },
        {
            title: '隐患等级',
            key: 'risk_level',
            dataIndex: 'risk_level',
            ellipsis: true,
            align: "center",
            render: (_, { risk_level }) => {
                return getLabel(riskLevelOptions, risk_level)
            }
        },
        {
            title: '风险标识',
            dataIndex: 'risk_key',
            key: 'risk_key',
            ellipsis: true,
            align: "center",
            render: (_, { risk_level }) => {
                return risk_level ? <img src={riskLevelOptions.find(item => item.value === risk_level)?.icon} alt='' className='risk-key-img'></img> : '-'
            }
        },
        {
            title: '处置状态',
            dataIndex: 'state',
            key: 'state',
            ellipsis: true,
            render: (_, { state }) => {
                return state ?
                    <div>
                        <span style={{
                            backgroundColor: rectifyStateOptions.find(item => item.value === state)?.bg,
                            width: '8px',
                            height: "8px",
                            display: 'inline-block',
                            borderRadius: '50%',
                            marginRight: '8px'
                        }}></span>
                        {getLabel(rectifyStateOptions, state)}
                    </div>
                    : '-'
            }
        },
    ];
    const data = [
        {
            key: '1',
            time: '2023-11-02',
            project_name: "余政储出【2019】47号地块、余政储出【2019】48号地块",
            risk_info: '现场消防/施工现场/灭火器材配备不足或灭火器材失效',
            risk_level: 2,
            risk_key: "",
            state: 1
        },
        {
            key: '2',
            time: '2023-11-02',
            project_name: "杭州地铁3号线二期工程土建施工SG3-2-1标段",
            risk_info: "1#楼10层未配备灭火器",
            risk_level: 1,
            risk_key: "",
            state: 1
        },
        {
            key: '3',
            time: '2023-11-02',
            project_name: "临平自来水厂一期工程（厂区）—A区工程",
            risk_info: '脚手架工程/脚手架搭设(安装)/水平杆搭设不符合要求',
            risk_level: 4,
            risk_key: "",
            state: 3
        },
        {
            key: '4',
            time: '2023-11-02',
            project_name: "余政储出（2020）5号地块开发项目W-1#-W-22#楼、WP-1-WP-7楼、地下室工程",
            risk_info: '司索工人未佩戴安全帽上岗',
            risk_level: 1,
            risk_key: "",
            state: 1
        },
        {
            key: '5',
            time: '2023-11-02',
            project_name: "年产1亿粒益生菌咀嚼性胶囊暨生物医学工程产业创新谷项目",
            risk_info: '司索工人未佩戴安全帽上岗',
            risk_level: 3,
            risk_key: "",
            state: 4
        },
    ];

    const setShowStateFn = useCallback(function foo(show) {
        setShowState(show)
    }, [])
    return (
        <BottomWarpper>
            <CustomContainerHeader height="34px" defaultSlot={'事件中心'} type='large' clickRightHandle={e => { setShowState(true) }} />
            <div className="content-container">
                <Table rowClassName="test" columns={columns} bordered={false} dataSource={data} pagination={false} />;
            </div>
            <CustomModal isShow={showState} setShowStateFn={setShowStateFn} defaultContent={<div>哈哈哈哈哈</div>} title="事件中心"></CustomModal>
        </BottomWarpper>
    )
})

export default Bottom